.container {
  position: relative;
}

.container_is-open {
  .control-arrow {
    transform: rotate(180deg);
  }

  .content {
    display: block;
  }
}

.toggle {
  all: unset;
}

.control {
  margin: 0;
  padding: 6px 8px;
  display: flex;
  background: var(--pneumatic-color-black4);
  border-radius: 16px;
  align-items: center;

  &:hover .control-value {
    color: var(--pneumatic-color-link-hover);
  }
}

.control-value {
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  color: var(--pneumatic-color-black72);
  transition: color 0.1s ease-in-out;
}

.control-arrow {
  margin-left: 4px;
  color: var(--pneumatic-color-black16);
}

.content {
  z-index: 20;
  padding: 16px;
  display: none;
  overflow: hidden;
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgb(98 98 95 / 8%);
}
